<template>
  <div class="list">
    <!-- vant分类选择组件 -->
    <van-tree-select
      height="158vw"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="onitemclick"
    >
      <template #content>
        <div v-if="active === 0">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 1">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 2">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 3">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 4">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 5">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 6">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 7">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 8">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 9">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        <div v-if="active === 10">
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
        
        <div v-if="active === 11">
          <!-- 子组件 -->
          <flower-details
            v-for="(item, fid) in results"
            :key="fid"
            :details="item"
          ></flower-details>
        </div>
      </template>
    </van-tree-select>

    <tabbar/>
  </div>
</template>

<script>
import FlowerDetails from '@/components/common/FlowerDetails.vue';
import Tabbar from '../components/common/Tabbar.vue';

export default {
  // name: "List",
  components: { Tabbar,FlowerDetails},
  data() {
    return {
      results: [],
      active: 0,
      items: [
        { text: "白羊座", code: 101 },
        { text: "金牛座", code: 102 },
        { text: "双子座", code: 103 },
        { text: "巨蟹座", code: 104 },
        { text: "狮子座", code: 105 },
        { text: "处女座", code: 106 },
        { text: "天秤座", code: 107 },
        { text: "天蝎座", code: 108 },
        { text: "射手座", code: 109 },
        { text: "摩羯座", code: 110 },
        { text: "水瓶座", code: 111 },
        { text: "双鱼座", code: 112 },
      ],
      // aa:''
    };
  },
  mounted() {
    // 懒加载传值下标0，就是第一个白羊
    this.onitemclick(0);
  },
  methods: {
    // 点击事件传值
    onitemclick(index) {
      // 保存code的值便于传递给接口！！！！！！！！！！！！！！！！
      this.code = this.items[index].code;
      console.log('此刻this.code的值:',this.code);
      const url = `http://127.0.0.1:3000/product/ch?family_id=${this.code}`;
      this.axios.get(url).then((res) => {
        console.log(url);
        // this.axios.get(url, { fid: 101}).then((res)
        console.log("list栏搜索成功", res);
        this.results = res.data.data;
        
      });
    },
  },
};
</script>

<style scoped>
template div flowerdetails {
  margin-bottom: 5vw;
}
</style>